<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">销量统计表</div>
      <div class="sub_title">1901 - 1914 服装销量统计表</div>
      <slot name="title"></slot>
    </div>
    <div id="line_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      chart: null,
      dataList: [
        { consumption: 0.65, price: 1, year: 1965 },
        { consumption: 0.66, price: 1.05, year: 1966 },
        { consumption: 0.64, price: 1.1, year: 1967 },
        { consumption: 0.63, price: 1.12, year: 1968 },
        { consumption: 0.55, price: 1.15, year: 1969 },
        { consumption: 0.57, price: 1.19, year: 1970 },
        { consumption: 0.58, price: 1.14, year: 1971 },
        { consumption: 0.59, price: 1, year: 1972 },
        { consumption: 0.57, price: 0.96, year: 1973 },
        { consumption: 0.55, price: 0.92, year: 1974 },
        { consumption: 0.54, price: 0.88, year: 1975 },
        { consumption: 0.55, price: 0.87, year: 1976 },
        { consumption: 0.42, price: 0.89, year: 1977 },
        { consumption: 0.28, price: 1, year: 1978 },
        { consumption: 0.15, price: 1.1, year: 1979 },
      ],
    };
  },

  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "line_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
    });
    // 给图表赋值
    this.chart.data(this.dataList);

    // 设置度量
    this.chart.scale({
      consumption: {
        nice: true,
      },
      price: {
        nice: true,
      },
    });
    // 设置提示信息
    this.chart.tooltip({
      // 是否显示 tooltips 辅助线。
      showCrosshairs: true,
    });
    this.chart
      .path()
      .animate({
        appear: {
          animation: "path-in",
          duration: 1000,
          easing: "easeLinear",
        },
      })
      .position("price*consumption");
    this.chart
      .point()
      .animate({
        appear: {
          appear: "fade-in",
          duration: 200,
          easing: "easeLinear",
          delay: (obj) => {
            const index = this.dataList.findIndex((item) => item.year === obj.year);
            return index * (1000 / this.dataList.length);
          },
        },
      })
      .position("price*consumption")
      .shape("square");
    // 渲染图表
    this.chart.render();
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      console.log(newValue);
      this.chart.changeData(newValue);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>